<template>
  <div>
    <Header :title="'返回'" :subTitle="'服务单'" :hasBackPath="true" @headerBack="headerBack"></Header>
    <a-card :bordered="false">
      <div class="no-print" style="text-align: right">
        <a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
      </div>
      <section id="printContent">
        <!-- 搭配清单 -->
        <div class="wrapper" id="match_list" style="page-break-after: always">
          <div class="clearfix">
            <div class="lookwrap">
              <div class="lookhead">
                <img :src="printData.fashioner.photo" class="fashioner-head" style="" />
                <div class="lookname">
                  <p>
                    <strong>{{ printData.fashioner.name }}</strong>
                  </p>
                  <p><strong>SENIOR STYLIST</strong></p>
                </div>
              </div>
              <div class="looktext" style="margin-left: 40px">
                <div class="textdetail">
                  <div>
                    <span> 亲爱的{{ printData.customer.nickName }} </span>
                    <img style="height: 30px" src="https://img.bzhz.jnbygroup.com/9479691c7ab143bf8fcda1b91a5e1953/202010/150e65c16c1648aa8f3fe4d9bedf5e5e.png" />
                    <img style="height: 30px; margin-left: 12px" :src="vipCard(printData.customer)" />
                  </div>
                  <img :src="printData.box.brCodeUrl" />
                </div>

                <p>Hello，我是您的搭配师{{ printData.fashioner.name }}，{{ printData.randomMemo }}</p>
              </div>
            </div>
          </div>
          <section v-for="(look, index) in lookList" :key="index">
            <div class="stylewrap2">
              <div class="styletitle2">
                <h2>#{{ index | lookIndex }}</h2>
              </div>
            </div>
            <div class="picwrap" :style="{ width: '100%', height: picwrap(lookList) }">
              <div :class="rightwrap(lookList)">
                <template v-if="lookList.length == 1">
                  <div style="display: flex; flex-wrap: wrap; height: 664px">
                    <div class="rightcon" v-for="detail in look.details" :key="detail.id">
                      <img :src="detail.imgUrl" class="smallimg" />
                      <h1>{{ detail.no }}</h1>
                      <p>{{ detail.productCode }}{{ detail.colorNo }}{{ detail.sizeNo }}</p>
                    </div>
                  </div>
                  <div class="rightcontTips">
                    <p class="desc2">
                      {{ look.content }}
                    </p>
                    <!-- <p class="desc2" v-if="look.content">tips:{{ look.content }}</p> -->
                  </div>
                </template>
                <template v-else>
                  <div class="rightconall" :style="{ marginTop: lookList.length == 3 ? '28px' : '57px' }">
                    <div class="rightcon22" :class="lookList.length == 3 ? 'rightcon23' : 'rightcon24'" v-for="detail in look.details" :key="detail.id">
                      <img :src="detail.imgUrl" :class="lookList.length == 3 ? 'smallimg23' : 'smallimg22'" />
                      <h1>{{ detail.no }}</h1>
                      <p>{{ detail.productCode }}{{ detail.colorNo }}{{ detail.sizeNo }}</p>
                    </div>
                  </div>
                  <div :class="lookList.length > 2 ? 'rightcontTips2' : 'rightcontTips'">
                    <p class="desc2">
                      {{ look.content }}
                    </p>
                    <!-- <p class="desc2" v-if="look.content">tips:{{ look.content }}</p> -->
                  </div>
                </template>
              </div>
            </div>
          </section>
          <template v-if="printData.shopList">
            <div>
              <div class="rightconall2">
                <div style="flex: 1; margin-left: 40px">
                  <span class="leftSize"> SINGLE ITEMS</span>
                  <span class="rightSize"> 搭配师为您搭配了相关单品，</span>
                  <span class="rightSize"> 您可用于各款穿搭</span>
                </div>
                <div class="single-list" style="margin-right: 34px">
                  <div class="rightcon22" style="margin-left: 60px" v-for="detail in printData.shopList" :key="detail.id">
                    <img :src="detail.imgUrl" class="smallimg22" />
                    <h1>{{ detail.no }}</h1>
                    <p>{{ detail.productCode }}{{ detail.colorNo }}{{ detail.sizeNo }}</p>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <div class="footer">
            <div class="picwrap3">
              <div>
                <img src="https://img.bzhz.jnbygroup.com/printlogo2.png" style="width: 210px; margin-bottom: -20px" />
              </div>
              <div>
                <img :src="qrCode" style="width: 114px; height: 114px" /><br />
                <label style="margin-left: 8px">扫码进入付款界面</label>
              </div>
            </div>
            <img style="width: 100%; margin-top: -45px; margin-bottom: -35px" src="https://img.bzhz.jnbygroup.com/printfooter.png" />
          </div>
        </div>
        <!-- 商品清单 -->
        <div class="wrapper" id="product_list" style="page-break-after: always">
          <!-- #(box.wall??)- #(box.rtxlatticenum??)-->
          <div class="picwrap4" style="justify-content: space-between">
            <div style="margin-bottom: 20px">
              <label style="font-size: 60px; font-family: TTFirsNeue-Bold, TTFirsNeue; font-weight: 800; color: #000000; margin-bottom: 52px">COMMONITYLIST</label>
              <br />
              <label style="font-size: 45px; font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1; font-weight: 800; color: #000000; margin-bottom: 52px">商品清单</label>
            </div>
            <img :src="printData.box.brCodeUrl" />
          </div>
          <div class="assort">
            <!--<div class="head pri-color">-->
            <!--<img class="mr5" src="/res/img/icon_list.png" alt="" style="width: 20px">此次搭配清单-->
            <!--</div>-->
            <table>
              <tr style="text-align: center">
                <th style="width: 60px">序号</th>
                <th style="width: 300px">商品款色号</th>
                <th style="width: 280px">品牌</th>
                <th style="width: 300px">品名</th>
                <th style="width: 120px">吊牌价</th>
                <!-- <th style="width: 124px;">会员优惠价</th> -->
              </tr>
              <tbody>
                <tr v-for="item in printData.productList" :key="item.id">
                  <td>{{ item.productNo | productNo }}</td>
                  <td>{{ item.sku }}</td>
                  <td>{{ item.productBrand | productBrand }}</td>
                  <td class="ellipsis">{{ item.productName }} {{ item.productColorNo }}{{ item.productColor }}{{ item.productSize }}</td>
                  <td><span style="font-family: SourceHanSansCN">¥</span> {{ item.productPrice }}</td>
                  <td></td>
                </tr>

                <tr>
                  <td style="border: solid 0px; font-size: 12px; padding: 10px 0; text-align: left" colspan="6">
                    <img src="./img/icon_11.png" style="height: 14px; width: 14px; margin-left: 20px" />
                    <span style="margin-left: 20px; display: inline-block">如果您的多套搭配里有相同的款式和码数的商品，则该商品只发一件。</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="footer2">
            <div class="mid-title-box">
              <label class="mid-title">PAYMENT PROCEDURE</label>
              <label class="mid-cn-title">付款流程</label>
            </div>
            <!-- #if(promotionName)
      <div class="promotionName">标明促销款的产品，现享受#(promotionName??)</div>
      #end-->

            <div class="choose">
              <!--<div class="head  pri-color" style="margin-bottom: 13px;">-->
              <!--<img class="mr5" src="/res/img/icon_pass.png" alt="" style="width: 20px">Like or Love，请告诉我们你的选择！-->
              <!--</div>-->
              <!--<div class="tips">-->
              <!--（温馨提示：收到盒子后，你有长达5天的时间逐一试穿，留下喜欢的并关于防盗，其余免费退回。）-->
              <!--</div>-->

              <div class="list-wrapper">
                <div class="list">
                  <div class="img">
                    <img :src="qrCode" alt="" class="min" />
                  </div>
                  <div class="text" style="font-size: 12px; text-align: center">
                    <p>微信扫描该二维码进入你的订单</p>
                  </div>
                </div>
                <div class="list">
                  <img src="./img/icon_arrow.png" alt="" style="width: 20px" />
                </div>
                <div class="list">
                  <div class="img">
                    <img src="./img/icon_2.png" alt="" class="min" />
                  </div>
                  <div class="text" style="font-size: 12px; text-align: center">
                    <p>勾选你要留下的产品进入订单支付</p>
                  </div>
                </div>
                <div class="list">
                  <img src="./img/icon_arrow.png" alt="" style="width: 20px" />
                </div>
                <div class="list">
                  <div class="img">
                    <img src="./img/icon_3.png" alt="" class="min" />
                  </div>
                  <div class="text" style="font-size: 12px; text-align: center; width: 170px">
                    <p>对本次不需要的衣服在线预约快递上门取件</p>
                  </div>
                </div>
                <div class="list">
                  <img src="./img/icon_arrow.png" alt="" style="width: 20px" />
                </div>
                <div class="list">
                  <div class="img">
                    <img src="./img/icon_4.png" alt="" class="min" />
                  </div>
                  <div class="text" style="font-size: 12px; text-align: center">
                    <p>对本次的服务和产品进行点评</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="mid-title-box">
              <label class="mid-title">USER REMINDER</label>
              <label class="mid-cn-title">温馨提示</label>
            </div>
            <div class="line"></div>
            <div class="picwrap6" style="height: 208px; border-bottom: none">
              <ul class="piculs" style="font-size: 14.25px; font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1; font-weight: normal; padding-left: 17px">
                <li style="margin-bottom: 43px; list-style: none">
                  <img src="./img/dot.png" />
                  <div>关于防盗扣<br />未购买衣物的防盗扣请勿拆卸，拆后即视为购买喔。</div>
                </li>
                <li style="list-style: none">
                  <img src="./img/dot.png" />
                  <div>关于少寄回/污损<br />退回未购买衣物，请确保衣物齐全无污损，缺件/污损也视为购买喔。</div>
                </li>
              </ul>
              <img src="https://img.bzhz.jnbygroup.com/printlogo2.png" style="width: 210px; margin-right: 40px" />
            </div>
            <img style="width: 100%; margin-top: -40px; margin-bottom: -35px" src="https://img.bzhz.jnbygroup.com/printfooter.png" />
          </div>
        </div>
      </section>
    </a-card>
  </div>
</template>
<script>
import { getBoxPrintData, createPrintQrCode } from '@/api/box/api'
import Header from '@/views/box/components/layouts/Header'
export default {
  components: {
    Header
  },
  data() {
    return {
      boxId: '',
      printData: {
        box: {},
        customer: {},
        fashioner: {},
        // lookList: [],
        productList: [],
        randomMemo: '',
        scene: {},
        shopList: []
      },
      lookList: [],
      qrCode: ''
    }
  },
  computed: {
    vipCard(obj) {
      return obj => {
        if (obj.viptypeName && obj.viptypeName == '集团银卡') {
          return 'https://img.bzhz.jnbygroup.com/9479691c7ab143bf8fcda1b91a5e1953/202010/f6c35c9fbb6549f68c777d9a3b793f4b.png'
        } else if (obj.viptypeName == '集团金卡') {
          return 'https://img.bzhz.jnbygroup.com/9479691c7ab143bf8fcda1b91a5e1953/202010/ba8d20c50b164c96ac191e433f04a0bd.png'
        } else if (obj.viptypeName == '集团白金卡') {
          return 'https://img.bzhz.jnbygroup.com/9479691c7ab143bf8fcda1b91a5e1953/202010/3152184a460b4434938f84be49f21cb2.png'
        } else if (obj.viptypeName == '集团普卡') {
          return 'https://img.bzhz.jnbygroup.com/9479691c7ab143bf8fcda1b91a5e1953/202010/2dfeeea15c5b43adb9c00cff966083eb.png'
        }
      }
    },
    lookRightCon(list) {
      return list => {
        if (list.length == 1) {
          return '100%'
        } else if (list.length == 2) {
          return '50%'
        } else if (list.length == 3) {
          return '33.3%'
        } else if (list.length == 4) {
          return '25%'
        }
      }
    },
    rightwrap(list) {
      return list => {
        if (list.length == 1) {
          return 'rightwrap'
        } else if (list.length == 2) {
          return 'rightwrap23'
        } else {
          return 'rightwrap22'
        }
      }
    },
    picwrap(list) {
      return list => {
        if (list.length == 1) {
          return '49%'
        } else if (list.length == 2) {
          return '22.3%'
        } else {
          return '14%'
        }
      }
    }
  },
  filters: {
    lookIndex(v) {
      if (v + 1 < 9) {
        return '0' + (v + 1)
      } else {
        return v
      }
    },
    productNo(v) {
      if (v <= 9) {
        return '0' + v
      } else {
        return v
      }
    },
    productBrand(v) {
      if (v == 'A PERSONAL NOTE 73') {
        return 'APN'
      } else if (v == 'A PERSONAL NOTE 73饰品') {
        return 'APN饰品'
      } else {
        return v
      }
    }
  },
  created() {
    this.boxId = this.$route.params.boxId
    this.getCode()
    this.fetchData()
  },
  methods: {
    headerBack() {
      this.$router.back()
    },
    fetchData() {
      let data = {
        requestData: {
          boxId: this.boxId
        }
      }
      getBoxPrintData(data).then(res => {
        console.log(res.data)
        if (res.code == 0) {
          this.printData = res.data
          this.lookList = this.printData.lookList.slice(0, 3)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    getCode() {
      createPrintQrCode(this.boxId).then(res => {
        if (res.code == 0) {
          this.qrCode = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  }
}
</script>
<style src="./printNew.less" lang="less" scoped></style>
<style src="./style.less" lang="less" scoped></style>
<style lang="less" scoped>
#printContent {
  .fashioner-head {
    width: 120px;
    height: 120px;
    border-radius: 120px;
    display: block;
    margin-top: 35px;
    margin-left: 20px;
    object-fit: cover;
  }
  table td {
    text-align: center;
  }
}
</style>
<style lang="less" scoped>
@font-face {
  /* font-test*/
  font-family: SourceHanSansCN;
  src: url('./SourceHanSansCN-Regular.otf');
}

.wrapper {
  color: #000000;
  font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1;
  font-weight: normal;
  width: 1086px;
}
.lookhead {
  margin-left: 40px;
  text-align: center;
  .fashioner-head {
    margin: 35px auto 0;
  }
  .lookname {
    margin-top: 18px;
    width: 140px;
    p {
      margin: 0;
      font-family: TTFirsNeue-DemiBold, TTFirsNeue;
    }
  }
}
.looktext {
  .textdetail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
      display: flex;
      align-items: center;
      span {
        font-size: 28px;
        margin-right: 10px;
      }
    }
  }
  > p {
    font-family: FZLTHJW--GB1-0, FZLTHJW--GB1;
  }
}
.styletitle2 {
  padding: 0 35px;
  h2 {
    font-family: TTFirsNeue-DemiBold, TTFirsNeue;
    margin-bottom: 0;
    line-height: 40px;
    font-size: 21px;
  }
}
.mid-title-box {
  line-height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #000;
  .mid-title {
    font-size: 25px;
    font-family: TTFirsNeue-Bold, TTFirsNeue;
    font-weight: bold;
    color: #000000;
    margin-left: 48px;
  }
  .mid-cn-title {
    padding-right: 55px;
    font-size: 19px;
    font-weight: normal;
    color: #000000;
  }
}
.list-wrapper {
  height: 210px;
  .list {
    .img {
      margin-bottom: 18px;
    }
    .text {
      p {
        font-size: 14px;
      }
    }
  }
}
.rightcon23 {
  h1,
  p {
    font-size: 11px;
    margin-top: 4px;
    line-height: 14px;
  }
  p {
    margin-top: 2px;
  }
}
.single-list {
  display: flex;
}
.rightcon24 {
  h1 {
    font-size: 13px;
    line-height: 17px;
    margin-top: 8px;
  }
  p {
    font-size: 11px;
    line-height: 14px;
    margin-top: 9px;
  }
}
.desc2 {
  height: 100%;
  display: flex;
  align-items: center;
}
.wrapper {
  .footer {
    > div {
      justify-content: space-between;
      padding: 0 40px;
      height: auto;
    }
  }
}

table {
  th {
    font-size: 18px;
    padding: 10px 0;
  }
  td {
    border: solid 0px;
    font-size: 16px;
    padding: 15px 0;
  }
}
.ant-layout-content /deep/.ant-layout-footer {
  display: none;
}
</style>

